<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Import style -->
    <link
            rel="stylesheet"
            href="/assets/newfile/index.css"
    />
    <!-- Import Vue 3 -->
    <script src="/assets/newfile/vue.global.prod.js"></script>
    <!-- Import component library -->
    <script src="/assets/newfile/element-plus"></script>
    <link rel="stylesheet" href="/assets/newfile/microphone.css" />
    <script src="/assets/newfile/microphone.js"></script>
    <style>
        .noTouch{
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .loudbox{
            float: left
        }
        #loud{
            color:#ff6600;
            display:inline-block;
            margin-left:15px;
            position: absolute;
            left: 140px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="/*text-align: center;*/margin-top: 100px;">
        <div class="loudbox">
            <div id="loud">音量大小：0%</div>
            <div id="Microphone"></div>
        </div>
        <text style="color: red;top:150px;position: absolute;" v-show="hasawv">还没有录音哦</text>
        <el-progress type="circle" :format="recoderFormat" :stroke-width="10" :percentage="recoderSecond"></el-progress>
        <br/>
        <audio v-show="recorderEnd" controls ref="audio" muted="muted" src="" id="audio"></audio>
        <br/>
        <br/>
        文件名:
        <el-input style="width: 30%" v-model="filename" v-on:input="inchange()"></el-input><text style="color: red" v-show="hastext"> 请先输入文件名</text>
        <br/>
        <p></p>
        <el-button  @click="startRecoder()">开始</el-button>
        <el-button @click="stopRecoder()">结束</el-button>
        <el-button @click="cancelRecoder()">取消</el-button>
        <el-button round class="noTouch" type="success" @click="successfully()">完成</el-button>
        <p style="margin-top: 10px;"><textarea id="displaytext" style="display: none;width: 70%;font-size: 17px;"></textarea></p>
    </div>
</div>

<script src="/assets/newfile/recorder.js"></script>
<script>
    const App = {
        compilerOptions: {
            delimiters: ['${', '}'],
            comments: true
        },
        data() {
            return {
                urlparams:this.getParams(),
                hastext:false,
                filename:"",
                hasawv:false,
                recorder:null,
                recoderSecond:0,
                recorderAudio:null,
                talkBtnText:"按住 说话",
                recorderEnd:false
            };
        },
        methods: {
            inchange:function(){
                this.hastext = false;
            },
            getParams:function() {
                const regex = /[?&]([^=#]+)=([^&#]*)/g;
                const params = {};
                let match;
                while (match = regex.exec(window.location.href)) {
                    params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
                }
                return params;
            },
            startRecoder:function(e){
                this.hasawv = false;
                if(this.recorder){
                    this.recorder.destroy();
                    this.recorder=null;
                }
                var _this=this;

                _this.recorder = new Recorder();
                _this.recorderAudio = document.querySelector('#audio');
                _this.recorder.start();

                _this.recorder.onprogress = function(params) {
                    _this.recoderSecond=parseInt(params.duration);
                    var idx = document.getElementById("loud");
                    idx.innerHTML = "音量大小：" + params.vol.toFixed(0) + "%";
                    microphone.volume("Microphone", params.vol);
                }
                this.talkBtnText="松开 结束";
                // e.preventDefault();
            },
            stopRecoder:function(){
                if(!this.recorder){
                    return;
                }
                var blob=this.recorder.getWAVBlob();
                this.recorderAudio.src = URL.createObjectURL(blob);
                this.recorderAudio.controls = true;
                this.talkBtnText="按住 说话";
                this.recorderEnd=true;
            },
            sendRecoder:function(){
                if(!this.recorder){
                    return;
                }
                var blob=this.recorder.getWAVBlob();
                this.talkBtnText="按住 说话";
            },
            cancelRecoder:function(){
                this.recoderSecond=0;
                if(!this.recorder){
                    return;
                }
                this.recorder.destroy();
                this.recorder=null;
            },
            recoderFormat(percentage){
                return percentage+"s";
            },
            successfully:function(){
                if(this.filename == ''){
                    this.hastext = true;
                    return false;
                }
                if(typeof this.recorder?.getWAVBlob() === 'undefined'){
                    this.hasawv = true;
                    return false
                }
                let formData = new FormData();
                formData.append("file", this.recorder.getWAVBlob(),this.filename+'.wav');
                formData.append('category','');

                fetch('/aZIYHuboft.php/ajax/ossupload', {
                    method: "POST",
                    body: formData
                }).then(response => response.json()).then(res => {
                    if(res.code == 1){
                        if(typeof this.urlparams.data_input_id != 'undefined'){
                            var parentinput = parent.layer.getChildFrame("input#"+this.urlparams.data_input_id);
                            if(parentinput.length == 0){
                                parentinput = parent.parent.layer.getChildFrame("input#"+this.urlparams.data_input_id);
                            }
                            parentinput.val(res.data.url);
                            parent.layer.close(parent.layer.getFrameIndex(window.name))
                        }else{
                            alert('参数错误')
                        }
                        return
                    }
                    alert(res.msg)
                }).catch(error => {
                    console.error(error);
                });
            }
        },
        //属性初始化
        created(){
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>